import React, {useEffect} from 'react';
import { Form } from 'antd';
import { observer } from 'mobx-react';
import EnvServerList from './EnvServerList';
import EnvVariableList from './EnvVariableList';
import environmentStore from "../store/environmentStore";


const EnvForm = ({ envId }) => {
    const {findEnvironment,updateEnvironment,findEnvironmentList} = environmentStore

    const workspaceId = localStorage.getItem('workspaceId')
    const [form] = Form.useForm();

    useEffect(async() => {
        let res = await findEnvironment(envId)
        if(res.code===0){
            form.setFieldsValue(res.data)
        }else {
            form.resetFields()
        }
    },[envId])

    const onFinish = async () => {
        let values = await form.getFieldsValue()
        if(envId){
            values.id = envId
            await updateEnvironment(values)
            await findEnvironmentList({workspaceId:workspaceId})
        }
    };

    return (
        <Form
            form={form}
            layout="vertical"
            onFinish={onFinish}
        >
            <Form.Item label="服务地址" >
                <EnvServerList envId={envId}/>
            </Form.Item>

            <Form.Item label="变量" >
                <EnvVariableList envId={envId}/>
            </Form.Item>
        </Form>
    );
};

export default observer(EnvForm); 